<template>
    <el-dialog v-model="iconsDialogVisible" title="设置图标" destroy-on-close>
        <div style="max-height: calc(100vh - 250px);overflow: auto;width:100%">
            <el-row>
                <div v-for="item in icons" :key="item">
                    <el-icon class="justify-center w-20 h-20 border-1" size="30" @dblclick="handleDblClick(item)">
                        <component :is="item"></component>
                    </el-icon>
                </div>
            </el-row>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { getIcons } from '@/views/sys/perm/icon.js'
import { useStore } from 'vuex'
const store = useStore()

let timer = ref('')
const selectIcon = ref('')
const handleDblClick = (icon) => {
    if (timer.value) {
        clearTimeout(timer.value)
    }
    selectIcon.value = icon;
    iconsDialogVisible.value = false;
    store.commit('SET_MENU_ICON', selectIcon.value)
}


const iconsDialogVisible = ref(false)
const icons = ref([])

const open = () => {
    iconsDialogVisible.value = true;
    icons.value = getIcons();
}

/**
 * 暴露给父组件
 */
defineExpose({
    open,
    selectIcon
})
</script>